<template>
	<view class="container">
		<view class="tui-box">
			<tui-list-cell :arrow="true" unlined :radius="true" @click="chooseAddr">
				<!-- {{addressList.data}} -->
				<view class="tui-address">
					<view v-if="addressList && addressList.data">
						<view class="tui-userinfo"
							style="color: #999999;font-size: 24rpx;display: flex;align-items: center;">
							<view class="tui-addr-tag">默认</view>
							<view class="tui-name">
								{{addressList.data.province_name}}{{addressList.data.city_name}}{{addressList.data.district_name}}
							</view>
						</view>
						<view class="tui-addr">
							<!-- <view class="tui-addr-tag">公司</view> -->
							<text style="font-size: 32rpx;">{{addressList.data.address}}</text>
						</view>
						<view class="tui-userinfo" style="color: #999999;margin-top: 10rpx;">
							<text class="tui-name">{{addressList.data.consignee}}</text>{{addressList.data.mobile}}
						</view>
					</view>
					<view class="tui-none-addr" v-else>
						<image src="/static/images/index/map.png" class="tui-addr-img" mode="widthFix"></image>
						<text>选择收货地址</text>
					</view>
				</view>
				<view class="tui-bg-img"></view>
			</tui-list-cell>
			<view class="tui-top tui-goods-info">
				<!-- <tui-list-cell :hover="false" :lineLeft="false">
					<view class="tui-goods-title">
						商品信息
					</view>
				</tui-list-cell> -->
				<block v-for="(item,index) in calcList.goods_list" :key="index">
					<tui-list-cell :hover="true" :arrow="true">
						<view class="tui-padding tui-flex">
							<view>配送方式</view>
							<view class="">{{item.dispatch_type_text}}</view>
						</view>
					</tui-list-cell>
					<tui-list-cell :hover="false" padding="0">
						<view class="tui-goods-item">
							<image :src="info.app.cdnurl+item.current_sku_price.image" class="tui-goods-img"></image>
							<view class="tui-goods-center">
								<view class="tui-goods-name">{{item.goods.title}}</view>
								<view class="tui-goods-attr" v-if="item.current_sku_price && item.current_sku_price.goods_sku_text" style="display: flex;">
									<view class="" v-for="(itemSub,index) in item.current_sku_price.goods_sku_text" :key="index">{{itemSub}}</view>
								</view>
							</view>
							<view class="tui-price-right">
								<view>￥{{item.goods.price[0]}}</view>
								<view>x{{item.goods_num}}</view>
							</view>
						</view>
					</tui-list-cell>
				</block>
				<tui-list-cell :hover="false">
					<view class="tui-padding tui-flex">
						<view>商品总额</view>
						<view v-if="calcList && calcList.goods_old_amount">￥{{calcList.goods_old_amount}}</view>
					</view>
				</tui-list-cell>
		<!-- 		<tui-list-cell :arrow="hasCoupon" :hover="hasCoupon" @click="couponShow=true">
					<view class="tui-padding tui-flex">
						<view>优惠券</view>
						<view :class="{'tui-color-red':hasCoupon}" v-if="detail.coupon_id"
							style="display: flex;align-items: center;">
							<view class="tui-size-26">￥</view>

							<view class="" v-if="calcList && calcList.coupon_discount_fee">
								-{{calcList.coupon_discount_fee}}
							</view>
						</view>
						<view :class="{'tui-color-red':hasCoupon}"
							v-else-if="couponsList && couponsList.can_use && couponsList.can_use.length>=1">
							{{couponsList.can_use.length}}张优惠券可用
						</view>
						<view :class="{'tui-color-red':hasCoupon}" v-else>暂无优惠券</view>
					</view>
				</tui-list-cell> -->
			<!-- 	<tui-list-cell :hover="true" :arrow="true" @click="invoice">
					<view class="tui-padding tui-flex">
						<view>发票</view>
						<view class="tui-invoice-text">不开发票</view>
					</view>
				</tui-list-cell> -->
				<tui-list-cell :hover="false">
					<view class="tui-padding tui-flex">
						<view>配送费</view>
						<view v-if="calcList && calcList.dispatch_amount">￥{{calcList.dispatch_amount}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-padding tui-flex">
						<view>积分</view>
						<view v-if="calcList && calcList.score_amount">{{calcList.score_amount}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" :lineLeft="false" padding="0">
					<view class="tui-remark-box tui-padding tui-flex">
						<view>订单备注</view>
						<input type="text" class="tui-remark" placeholder="选填: 请先和商家协商一致"
							placeholder-class="tui-phcolor"></input>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" unlined>
					<view class="tui-padding tui-flex tui-total-flex">
						<view class="tui-flex-end tui-color-red">
							<view class="tui-black">合计： </view>
							<view class="tui-size-26">￥</view>
							<view class="tui-price-large">
								{{calcList.temp_remain_pay_fee || 0}}
							</view>
							<view class="tui-price-large">
								+
							</view>
							<view class="tui-price-large">
								{{calcList.score_amount || 0}}积分
							</view>
							<!-- <view class="tui-size-26">.00</view> -->
						</view>
					</view>
				</tui-list-cell>
			</view>

			<!-- 	<view class="tui-top">
				<tui-list-cell unlined :hover="insufficient" :radius="true" :arrow="insufficient">
					<view class="tui-flex">
						<view class="tui-balance">余额支付<text class="tui-gray">(￥2020.00)</text></view>
						<switch color="#19be6b" class="tui-scale-small" v-show="!insufficient" />
						<view class="tui-pr-30 tui-light-dark" v-show="insufficient">余额不足, 去充值</view>
					</view>
				</tui-list-cell>
			</view> -->
		</view>
		<view class="tui-safe-area"></view>
		<view class="tui-tabbar">
			<view class="tui-flex-end tui-color-red tui-pr-20">
				<view class="tui-black">实付金额: </view>
				<view class="tui-size-26">￥</view>
				<view class="tui-price-large">{{calcList.pay_fee || 0}}</view>
				<view class="tui-price-large">+</view>
				<view class="tui-price-large">{{calcList.score_amount || 0}}积分</view>
				<!-- <view class="tui-size-26">.00</view> -->
			</view>
			<view class="tui-pr25">
				<tui-button width="200rpx" height="70rpx" :size="28" type="danger" shape="circle"
					@click="btnPay">确认支付</tui-button>
			</view>
		</view>
		<t-pay-way :show="show" :payMoney="calcList.pay_fee" v-if="calcList && calcList.pay_fee" @pay="pay"
			@close="popupClose"></t-pay-way>
		<t-select-coupons :show="couponShow" @current="current" @close="couponClose" :couponList="couponsList.can_use"
			v-if="couponsList && couponsList.can_use"></t-select-coupons>

	</view>
</template>

<script>
	import {
		getAddress,
		getOrderCoupons,
		getOrderCodes,
		getOrderCalc,
		getOrderCreate,
		getOrderDetail,
		getShopPayPrepay,
		getUserProfile
	} from '@/apis/index.js'
	import tPayWay from "@/components/t-pay-way/t-pay-way"
	import tSelectCoupons from "./t-select-coupons/t-select-coupons.vue"
	export default {
		components: {
			tPayWay,
			tSelectCoupons
		},
		data() {
			return {
				hasCoupon: true,
				insufficient: false,
				show: false,
				couponShow: false,
				detail: {},
				addressList: {}, //地址
				couponsList: {}, //优惠券
				codesList: {}, //购物卡
				calcList: {}, //详情

			}
		},
		async onLoad(option) {
			if (option.data) {
				this.detail = JSON.parse(option.data)
				this.addressList = await this.address()

				let obj = await this.coupons(this.detail)

				this.couponsList = obj.data
				this.codesList = await this.codes(this.detail)
				let res = await this.calc(this.detail)
				this.calcList = res.data

			}
		},
		mounted() {

		},
		methods: {
			//创建订单
			async orderCreate(detail){
				let res=await getOrderCreate(detail)
				console.log(res,'res')
				return res
			},
			
			//订单详情
			async orderDetail(order_sn){
				
				let res=await getOrderDetail(order_sn)
				if (res.code==1) {
					return res
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
				
			},
			//余额支付
			
			async payPrepay(){
				await getShopPayPrepay()
			},
			//支付
			async pay(e) {
				if (!this.addressList.data) {
					uni.showToast({
						title: '选择收货地址',
						icon: 'none'
					})
					return
				}
				this.detail.address_id = this.addressList.data.id
				let order=await this.orderCreate(this.detail)
				
				if (order.code==0) {
					uni.showToast({
						title:order.msg,
						icon:'none'
					})
					return
				}
				
				let detail=await this.orderDetail(order.data.order_sn)
				
				
				
				
				var orderType
				if (e == 1) {
					orderType = 'money'
				}
				if (e == 2) {
					orderType = 'wechat'
				}
				if (e == 3) {
					orderType = 'wechat'
				}
				
				getShopPayPrepay({
					payment: orderType,
					order_sn: detail.data.order_sn
				}).then(res => {
					if(res.code==1){
						if (orderType=='money') {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							uni.navigateTo({
								url:"/discountPage/success/success"
							})
							return
						}
						uni.requestPayment({
							provider: 'wxpay',
							...res.data.pay_data,
							success: (res) => {
								uni.navigateTo({
									url:"/discountPage/success/success"
								})
							},
							fail: (err) => {
								if (err.errMsg === 'requestPayment:fail cancel') {
									uni.showToast({
										title:'取消支付',
										icon:'none'
									})
								} else {
									// that.payResult('fail');
								}
							},
						});
					}
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					
					// if (res.code == 1) {
					// 	uni.navigateTo({
					// 		url:"/discountPage/success/success"
					// 	})
					// }
				})
				
				
				
				
				
				// getOrderCreate(this.detail).then(res => {
					
				// 	// let str=await this.orderCreated(res.data.order_sn)
					
					
					
					
				// 	getOrderDetail(res.data.order_sn).then(res => {
				// 		let orderType
				// 		if (e == 1) {
				// 			orderType = 'money'
				// 		}
				// 		if (e == 2) {
				// 			orderType = 'alipay'
				// 		}
				// 		if (e == 3) {
				// 			orderType = 'wechat'
				// 		}

				// 		getShopPayPrepay({
				// 			payment: orderType,
				// 			order_sn: res.data.order_sn
				// 		}).then(res => {
				// 			console.log(res)
				// 			if (res.code == 1) {
				// 				uni.navigateTo({
				// 					url: "/discountPage/success/success"
				// 				})
				// 			}
				// 		})
				// 	})
				// })
			},
			
			//创建订单
			// async orderCreated(sn){
			// 	let res=await getOrderDetail(sn)
			// 	return res
			// },
			
			getUserInfo() {
				getUserProfile().then(res => {
					this && this.$tn.vuex('userInfos', res.data)
				})
			},
			async current(val) {
				this.detail.coupon_id = val.id
				let res = await this.calc(this.detail)
				this.calcList = res.data
			},
			getValue(selectedSchedule) {
				this.addressList.data = selectedSchedule
			},
			//获取地址

			async address() {
				let res = await getAddress()
				return res
			},

			//优惠券
			async coupons(obj) {
				let res = await getOrderCoupons(obj)
				return res
			},

			//购物卡
			async codes(obj) {
				let res = await getOrderCodes(obj)
				return res
			},

			//订单详情
			async calc(obj) {
				let res = await getOrderCalc(obj)
				return res
			},

			chooseAddr() {
				uni.navigateTo({
					url: "/discountPage/address/address"
				})
			},
			btnPay() {
				getUserProfile().then(res => {
					// this.userInfo = res.data
					this && this.$tn.vuex('userInfos', res.data)
					this.show = true
				})
			},
			popupClose() {
				this.show = false
			},
			couponClose() {
				this.couponShow = false
			},
			invoice() {
				uni.navigateTo({
					url: "/pages/discountPage/invoice/invoice"
				})
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 98rpx;
	}

	.tui-box {
		padding: 20rpx 0 118rpx;
		box-sizing: border-box;
	}

	.tui-address {
		min-height: 80rpx;
		padding: 10rpx 0;
		box-sizing: border-box;
		position: relative;
	}

	.tui-userinfo {
		font-size: 30rpx;
		font-weight: 500;
		line-height: 30rpx;
		padding-bottom: 12rpx;
	}

	.tui-name {
		padding-right: 40rpx;
	}

	.tui-addr {
		font-size: 24rpx;
		word-break: break-all;
		padding-right: 25rpx;
	}

	.tui-addr-tag {
		padding: 5rpx 8rpx;
		flex-shrink: 0;
		background: #EB0909;
		color: #fff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
		line-height: 25rpx;
		transform: scale(0.8);
		transform-origin: 0 center;
		border-radius: 6rpx;
	}

	.tui-bg-img {
		position: absolute;
		width: 100%;
		height: 8rpx;
		left: 0;
		bottom: 0;
		background: url("") repeat;
	}

	.tui-top {
		margin-top: 20rpx;
		overflow: hidden;
	}

	.tui-goods-title {
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	.tui-padding {
		box-sizing: border-box;
	}

	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-flex {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
	}

	.tui-total-flex {
		justify-content: flex-end;
	}

	.tui-color-red,
	.tui-invoice-text {
		color: #E41F19;
		padding-right: 30rpx;
	}

	.tui-balance {
		font-size: 28rpx;
		font-weight: 500;
	}

	.tui-black {
		color: #222;
		line-height: 30rpx;
	}

	.tui-gray {
		color: #888888;
		font-weight: 400;
	}

	.tui-light-dark {
		color: #666;
	}

	.tui-goods-price {
		display: flex;
		align-items: center;
		padding-top: 20rpx;
	}

	.tui-size-26 {
		font-size: 26rpx;
		line-height: 26rpx;
	}

	.tui-price-large {
		font-size: 34rpx;
		line-height: 32rpx;
		font-weight: 600;
	}

	.tui-flex-end {
		display: flex;
		align-items: flex-end;
		padding-right: 0;
	}

	.tui-phcolor {
		color: #B3B3B3;
		font-size: 26rpx;
	}

	/* #ifndef H5 */
	.tui-remark-box {
		padding: 22rpx 30rpx;
	}

	/* #endif */
	/* #ifdef H5 */
	.tui-remark-box {
		padding: 26rpx 30rpx;
	}

	/* #endif */

	.tui-remark {
		flex: 1;
		font-size: 26rpx;
		padding-left: 64rpx;
	}

	.tui-scale-small {
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	.tui-scale-small .wx-switch-input {
		margin: 0 !important;
	}

	/* #ifdef H5 */
	>>>uni-switch .uni-switch-input {
		margin-right: 0 !important;
	}

	/* #endif */
	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		z-index: 996;
	}

	.tui-pr-30 {
		padding-right: 30rpx;
	}

	.tui-pr-20 {
		padding-right: 20rpx;
	}

	.tui-none-addr {
		height: 80rpx;
		padding-left: 5rpx;
		display: flex;
		align-items: center;
	}

	.tui-addr-img {
		width: 36rpx;
		height: 46rpx;
		display: block;
		margin-right: 15rpx;
	}


	.tui-pr25 {
		padding-right: 25rpx;
	}

	.tui-safe-area {
		height: 1rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>